<template>
  <div class="simple-profile-container">
    <div class="simple-header">
      <h2>个人信息 - 简化版</h2>
      <button @click="fetchData" :disabled="loading">
        {{ loading ? '加载中...' : '刷新数据' }}
      </button>
    </div>
    
    <div class="simple-content">
      <div class="debug-info">
        <h3>调试信息</h3>
        <p>组件状态: {{ componentStatus }}</p>
        <p>数据状态: {{ dataStatus }}</p>
        <p>API响应: {{ apiResponse }}</p>
      </div>
      
      <div class="form-section">
        <h3>个人信息表单</h3>
        
        <div class="form-item">
          <label>用户ID:</label>
          <input type="text" v-model="userForm.id" readonly />
        </div>
        
        <div class="form-item">
          <label>用户名:</label>
          <input type="text" v-model="userForm.username" />
        </div>
        
        <div class="form-item">
          <label>姓名:</label>
          <input type="text" v-model="userForm.name" />
        </div>
        
        <div class="form-item">
          <label>邮箱:</label>
          <input type="email" v-model="userForm.email" />
        </div>
        
        <div class="form-item">
          <label>状态:</label>
          <span>{{ userForm.status === 1 ? '正常' : '禁用' }}</span>
        </div>
        
        <div class="form-actions">
          <button @click="updateData" :disabled="updateLoading">
            {{ updateLoading ? '更新中...' : '更新信息' }}
          </button>
          <button @click="resetForm">重置</button>
        </div>
      </div>
      
      <div class="raw-data">
        <h3>原始数据</h3>
        <pre>{{ JSON.stringify(userForm, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getProfile, updateProfile } from '@/api/profile'
import { ElMessage } from 'element-plus'

// 状态管理
const loading = ref(false)
const updateLoading = ref(false)
const componentStatus = ref('初始化中...')
const dataStatus = ref('未加载')
const apiResponse = ref('无')

// 用户表单数据
const userForm = reactive({
  id: null,
  username: '',
  name: '',
  email: '',
  status: 1,
  createdAt: null,
  updatedAt: null
})

// 原始数据备份
const originalData = reactive({})

// 获取数据
const fetchData = async () => {
  try {
    loading.value = true
    componentStatus.value = '正在获取数据...'
    dataStatus.value = '请求中'
    
    console.log('🔄 简化版组件开始获取数据...')
    
    const response = await getProfile()
    console.log('📡 简化版API响应:', response)
    
    apiResponse.value = `Code: ${response.code}, Message: ${response.msg || 'success'}`
    
    if (response.code === 200 && response.data) {
      console.log('✅ 简化版数据获取成功:', response.data)
      
      // 直接赋值，不做复杂映射
      Object.assign(userForm, {
        id: response.data.id,
        username: response.data.username || '',
        name: response.data.name || '',
        email: response.data.email || '',
        status: response.data.status || 1,
        createdAt: response.data.createdAt,
        updatedAt: response.data.updatedAt
      })
      
      Object.assign(originalData, userForm)
      
      componentStatus.value = '组件正常'
      dataStatus.value = '数据已加载'
      
      console.log('✅ 简化版表单数据:', userForm)
      ElMessage.success('数据获取成功')
    } else {
      console.log('❌ 简化版API响应异常:', response)
      componentStatus.value = 'API响应异常'
      dataStatus.value = 'API错误'
      ElMessage.error(response.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('❌ 简化版数据获取失败:', error)
    componentStatus.value = '请求失败'
    dataStatus.value = '网络错误'
    apiResponse.value = `Error: ${error.message}`
    ElMessage.error('网络请求失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 更新数据
const updateData = async () => {
  try {
    updateLoading.value = true
    
    const updatePayload = {
      username: userForm.username,
      name: userForm.name,
      email: userForm.email
    }
    
    console.log('🔄 简化版开始更新数据:', updatePayload)
    
    const response = await updateProfile(updatePayload)
    console.log('📡 简化版更新响应:', response)
    
    if (response.code === 200) {
      console.log('✅ 简化版数据更新成功')
      Object.assign(originalData, userForm)
      ElMessage.success('更新成功')
      
      // 重新获取数据
      await fetchData()
    } else {
      console.log('❌ 简化版更新失败:', response)
      ElMessage.error(response.msg || '更新失败')
    }
  } catch (error) {
    console.error('❌ 简化版更新异常:', error)
    ElMessage.error('更新失败: ' + error.message)
  } finally {
    updateLoading.value = false
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(userForm, originalData)
  ElMessage.info('表单已重置')
}

// 组件挂载
onMounted(() => {
  console.log('🚀 简化版个人信息组件已挂载')
  componentStatus.value = '组件已挂载'
  fetchData()
})
</script>

<style scoped>
.simple-profile-container {
  padding: 20px;
  background: white;
  min-height: 100vh;
}

.simple-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.simple-header h2 {
  color: #333;
  margin: 0;
}

.simple-header button {
  padding: 10px 20px;
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.simple-header button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.simple-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.debug-info {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.debug-info h3 {
  margin-top: 0;
  color: #666;
}

.debug-info p {
  margin: 10px 0;
  font-family: monospace;
}

.form-section {
  background: #fafafa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.form-section h3 {
  margin-top: 0;
  color: #333;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
  color: #555;
}

.form-item input {
  width: 200px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-item input:focus {
  outline: none;
  border-color: #409EFF;
}

.form-actions {
  margin-top: 20px;
}

.form-actions button {
  margin-right: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button:first-child {
  background: #67C23A;
  color: white;
}

.form-actions button:last-child {
  background: #E6A23C;
  color: white;
}

.form-actions button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.raw-data {
  grid-column: 1 / -1;
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.raw-data h3 {
  margin-top: 0;
  color: #333;
}

.raw-data pre {
  background: white;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
}
</style>
